<template>
	<view class="">
		<view class="card-item margin-bottom">
			<view class="card-content" :style="{background:$util.img(giftcardDetail.card_cover)?'url(' + $util.img(giftcardDetail.card_cover) + ') no-repeat 0 0/100% 100%':'url(https://cs.b2c.niuteam.cn/upload/uniapp/giftcard/detail/gitcard_default3.png) no-repeat 0 0/100% 100%' }">
				<view class="card-name">{{giftcardDetail.card_name}}</view>
				<view class="card-use">礼品卡权益</view>
				<!-- <view class="card-num">￥{{giftcardDetail.balance}} + {{giftcardDetail.point}}积分</view> -->
				<view class="card-num" v-if="giftcardDetail.balance>0.00 && giftcardDetail.point>0">￥{{giftcardDetail.balance}} + {{giftcardDetail.point}}积分</view>
				<view class="card-num" v-else-if="giftcardDetail.balance>0.00 && giftcardDetail.point==0">￥{{giftcardDetail.balance}}</view>
				<view class="card-num" v-else-if="giftcardDetail.balance==0.00 && giftcardDetail.point>0">{{giftcardDetail.point}} 积分</view>
			</view>
		</view>

		<view class="card-info">
			<view class="info info1">礼品卡名称：<span>{{giftcardDetail.card_name}}</span></view>
			<view class="info2" style=" padding: 20rpx 0;">
				<view class="info">销售价：<span>￥{{giftcardDetail.selling_price}}</span></view>
				<view class="info" v-if="giftcardDetail.time_type == 1">有效期：<span>永久有效</span></view>
				<view class="info" v-else-if="giftcardDetail.time_type == 2">有效期：<span>有效期限至
						{{$util.timeStampTurnTime(giftcardDetail.youxiao_time) }}</span></view>
				<view class="info" v-else-if="giftcardDetail.time_type == 3">
					有效期：<span>领取后 {{giftcardDetail.youxiao_day}} 天有效</span></view>
			</view>
			<view class="info">购买数量：
				<uni-number-box class="num-input" :value="num" @change="change" size="small" :min="1" :max="max_buy || giftcardDetail.card_count" />
			</view>
			<view class="info info3" style="border: none;">库存：<span>{{giftcardDetail.card_count}}</span></view>
		</view>

		<view class="bottom">
			<view class="bottom-left">
				合计：<span>￥{{num * giftcardDetail.selling_price}}</span>
			</view>
			<view class="bottom-right">
				<button type="primary" size="mini" @click="openChoosePayment()">立即购买</button>
			</view>
		</view>

		<!-- 选择支付方式弹窗 -->
		<ns-payment ref="choosePaymentPopup" :payMoney="num * giftcardDetail.selling_price" @confirm="gotoBuy"></ns-payment>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-login ref="login"></ns-login>
	</view>
</template>

<script>
	import nsPayment from '@/components/payment/payment.vue';

	export default {
		components: {
			nsPayment,
		},
		data() {
			return {
				order: 1,
				giftcardDetail: {},
				max_buy: 0,
				num: 1,
				id: '',
				isSub: false,
			};
		},
		onLoad(option) {
			var id = option.id
			this.getData(id)
			this.id = option.id
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
		},
		methods: {
			getData(id) {
				this.$api.sendRequest({
					url: '/giftcard/api/giftcard/giftcardDetail',
					data: {
						id: id
					},
					success: res => {
						if (res.code == 0 && res.data) {
							this.giftcardDetail = res.data;
							this.max_buy = parseFloat(res.data.max_buy);
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						} else {
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						}
					},
					fail: res => {}
				});
			},
			change(value) {
				this.num = value;
			},
			// 显示选择支付方式弹框
			openChoosePayment() {
				if(!uni.getStorageSync('token')){
					this.$refs.login.open('/promotionpages/giftcard/my_giftcard/detail?id='+this.id);
					return false;
				}else{
					if(this.giftcardDetail.card_count == 0) {
						this.$util.showToast({
							title: '库存不足'
						});
					} else {
						// #ifdef H5
						if(localStorage.getItem("userInfo")){
							uni.setStorageSync('paySource', 'giftcard');
							// #ifdef MP-WEIXIN
							this.subscribeMessage();
							// #endif
							this.$refs.choosePaymentPopup.open();
						}else{
							this.$util.showToast({
								title:'您尚未登录，请先登录'
							});
						}
						// #endif
						uni.setStorageSync('paySource', 'giftcard');
						// #ifdef MP-WEIXIN
						this.subscribeMessage();
						// #endif
						this.$refs.choosePaymentPopup.open();
					}
				}
			},
			/**
			 * 微信订阅消息
			 */
			subscribeMessage() {
				this.$api.sendRequest({
					url: '/weapp/api/weapp/messagetmplids',
					data: {
						keywords: 'ORDER_PAY,ORDER_DELIVERY,ORDER_TAKE_DELIVERY'
					},
					success: res => {
						if (res.data.length) {
							uni.requestSubscribeMessage({
								tmplIds: res.data,
								success: (res) => {},
								fail: (res) => {
									console.log('fail', res)
								}
							})
						}
					}
				})
			},
			gotoBuy() {
				this.$api.sendRequest({
					url: '/giftcard/api/giftcard/createorder',
					data: {
						id: this.id,
						selling_price: this.giftcardDetail.selling_price,
						num: this.num,
						order_total_price: this.num * this.giftcardDetail.selling_price
					},
					success: res => {
						if (res.data && res.code == 0) {
							uni.setStorageSync('paySource', 'giftcard');
							this.$refs.choosePaymentPopup.getPayInfo((res.data));
						} else {
							this.isSub = false; 
						}
					}
				})
			}
		}
	};
</script>

<style lang="scss">

	.card-item {
		padding: 54rpx 30rpx 34rpx 30rpx;
		background: url("https://cs.b2c.niuteam.cn/upload/uniapp/giftcard/detail/index.png") no-repeat 0 0/100% 50%;
		.card-content {
			padding: 30rpx 50rpx;
			border-radius: 15rpx;

			.card-name {
				margin-bottom: 50rpx;
				font-size: 48rpx;
				color: #fff;
			}

			.card-use {
				color: #fff;
			}

			.card-num {
				margin-top: 30rpx;
				line-height: 20rpx;
				color: #fff;
			}
		}
	}

	.card-info {
		margin: 20rpx 30rpx;
		padding: 10rpx 30rpx;
		background: #fff;

		.info {
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f5f5f5;

			.num-input {
				margin-left: 46rpx;
			}
		}

		.info1 {

			span {
				margin-left: 30rpx;
			}
		}

		.info2 {
			span {
				margin-left: 80rpx;
			}
		}

		.info3 {
			span {
				margin-left: 100rpx;
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 1rpx;
		width: 800rpx;
		height: 80rpx;
		display: flex;
		background: #fff;
		padding: 20rpx;

		.bottom-left {
			width: 400rpx;
			line-height: 80rpx;

			span {
				color: #ff4544;
				font-size: 35rpx;
				font-weight: 600;
			}
		}

		.bottom-right {
			width: 400rpx;

			button {
				width: 320rpx;
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}

	
	/deep/.decrease {
		margin-right: 10rpx !important;
	}
	
	/deep/.increase {
		margin-left: 10rpx !important;
	}
	/deep/.uni-input-input {
		background: #fff !important;
		border: 2rpx solid #eeeeee !important;
		width: 92% !important;
	}
	/deep/.uni-numbox__value.small {
		border: none !important;
	}
	/deep/ .uni-numbox__value {
		background-color:none !important;
	}
</style>
